import React from 'react'
import SimpleMDE from 'react-simplemde-editor';
import PropTypes from 'prop-types'
import { inject, observer } from 'mobx-react'

import { withStyles } from 'material-ui/styles'
import StarBorder from 'material-ui-icons/StarBorder'
import Star from 'material-ui-icons/Star'
import Button from 'material-ui/Button'
import style from './style'

import TopicsDetailStore from '../../stores/topic_detail'
import pushHistory from '../../HOC/push_history'

@inject((stores) => {
  const store = {
    topicDetail: stores.topicDetail,
  }
  return store
})
@observer
class CommentArea extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      content: '',
      showMarkd: false,
    }
    this.showMarked = this.showMarked.bind(this)
    this.handleChange = this.handleChange.bind(this)
    this.doComment = this.doComment.bind(this)
    this.hideMarked = this.hideMarked.bind(this)
    this.handleKeyDown = this.handleKeyDown.bind(this)
    this.love = this.love.bind(this)
    this.deLove = this.deLove.bind(this)
  }
  componentDidMount() {
  }
  // 获取输入的评论内容
  handleChange(content) {
    this.setState({
      content,
    })
  }
  // 显示评论输入框
  showMarked() {
    this.setState({
      showMarkd: true,
    })
  }
  // 隐藏评论输入框
  hideMarked() {
    this.setState({
      showMarkd: false,
    })
  }
  handleKeyDown(e) {
    if (e.keyCode === 27) {
      this.hideMarked()
    }
  }
  doComment() {
    const { topicDetail, topicId } = this.props
    const { content } = this.state
    if (!this.props.shouldLogin()) {
      return
    }
    topicDetail.createReply(topicId, content).then(() => {
      alert('评论成功')
      this.hideMarked()
    }).catch(msg => alert(msg))
  }
  love() {
    if (this.props.shouldLogin()) {
      this.props.love()
    }
  }
  deLove() {
    this.props.deLove()
  }
  render() {
    const { classes } = this.props
    return (
      <div className={classes.commentArea}>
        { !this.state.showMarkd ?
          <div>
            <input type="text" placeholder="添加回复..." className={classes.input} onFocus={this.showMarked} />
            <div className={classes.collect}>
              { !this.props.isCollect ?
                <StarBorder className={classes.collectIcon} onClick={this.love} />
                  :
                <Star className={classes.collectIcon} onClick={this.deLove} />
              }
            </div>
          </div>
            :
          <div onKeyDown={this.handleKeyDown}>
            <SimpleMDE
              onChange={this.handleChange}
              value={this.state.textValue}
              options={{
                autofocus: false,
                spellChecker: false,
                toolbar: false,
                status: false,
                // etc.
              }}
            />
            <div className={classes.controlButton}>
              <Button className={classes.button} raised color="primary" onClick={this.doComment}>
                评论
              </Button>
              <Button className={classes.button} raised onClick={this.hideMarked}>
                取消
              </Button>
            </div>
          </div>
        }
      </div>
    )
  }
}
export default pushHistory(withStyles(style)(CommentArea))

CommentArea.propTypes = {
  classes: PropTypes.objectOf(Object),
  love: PropTypes.func,
  deLove: PropTypes.func,
  isCollect: PropTypes.bool,
  topicDetail: PropTypes.instanceOf(TopicsDetailStore),
  topicId: PropTypes.string,
  shouldLogin: PropTypes.func,
}
